<template>
  <!--营销机会添加-->
  <el-drawer title="我是标题" v-model="dialog" :with-header="false" size="44%" @close="resetForm" :before-close="handleClose">
    <div class="add">
      <h4 style="margin: 10px">{{title}}</h4>
      <el-form :model="saleChange">
        <el-riw>
          <el-col>
            <div class="name">
              <el-form-item label="客户名称" :rules="[{ required: true, message: '客户名称不能为空',trigger: 'blur'}]" prop="customerName" style="font-weight: 900;margin-left: 56px">
                <el-input placeholder="请输入客户名称" v-model="saleChange.customerName" clearable style="width: 400px"/>
              </el-form-item>
            </div>
          </el-col>
          <el-col>
            <div class="name">
              <span>机会来源</span>
              <el-select v-model="saleChange.chanceSource" placeholder="请输入机会来源" style="width: 400px">
                <el-option v-for="item in chanceSource" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col>
            <div class="name">
              <el-form-item label="联系人" :rules="[{ required: true, message: '联系人不能为空',trigger: 'blur'}]" prop="linkMan" style="font-weight: 900;margin-left: 73px">
                <el-input placeholder="请输入联系人" v-model="saleChange.linkMan" clearable style="width: 400px"/>
              </el-form-item>
            </div>
          </el-col>
          <el-col>
            <div class="name">
              <el-form-item label="联系电话" :rules="[{ required: true, message: '联系电话不能为空',trigger: 'blur'}]" prop="linkPhone" style="font-weight: 900;margin-left: 56px">
                <el-input placeholder="请输入联系电话" v-model="saleChange.linkPhone" clearable style="width: 400px"/>
              </el-form-item>
            </div>
          </el-col>
          <el-col>
            <div class="name">
              <span>概要</span>
              <el-input placeholder="请输入概要" v-model="saleChange.overview" clearable style="width: 400px"></el-input>
            </div>
          </el-col>
          <el-col>
            <div class="name">
              <span style="position: relative;left: -398px;top: 4px;">成功几率(%)</span>
              <el-slider v-model="saleChange.cgjl" style="width: 350px;margin-left: 147px;margin-top: -20px" :step="10" show-stops></el-slider>
              <span style="position: relative;left:15px;top: -27px;font-weight: 900">{{saleChange.cgjl}}</span>
            </div>
          </el-col>
          <el-col>
            <div class="describe">
              <span>机会描述</span>
              <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4}" placeholder="请输入机会描述信息"
                        v-model="saleChange.description" style="width: 400px">
              </el-input>
            </div>
          </el-col>
          <el-col>
            <div class="name">
              <el-form-item label="指派给" :rules="[{ required: true, message: '指派人不能为空',trigger: 'blur'}]" prop="assignMan" style="font-weight: 900;margin-left: 73px">
                <el-select v-model="saleChange.assignMan" placeholder="请选择" style="width: 400px">
                  <el-option v-for="item in assignMan" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-riw>
      </el-form>
      <!--确定取消按钮-->
      <div class="confirm">
        <br>
        <template v-if="type===0">
          <el-button type="success" style="width: 82px;height: 44px" @click="submitAdd">确定添加</el-button>
        </template>
        <template v-else>
          <el-button type="success" style="width: 82px;height: 44px" @click="submitUpdate">确定修改</el-button>
        </template>
        <el-button type="primary" style="width: 82px;height: 44px" @click="dialog = false">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {addSaleChance, updateSaleChance} from "../../../../network/marketing";
import {ElMessage} from "element-plus";

export default {
  name: "SaleChangeForm",
  emits:['refresh-data'],
  data(){
    return{
      value1: 0,
      //营销机会添加
      saleChange:{
        customerName: null, //客户名称
        chanceSource: null, //机会来源
        linkMan: null, //联系人
        linkPhone: null, //联系电话
        overview: null, //概要
        cgjl: null, //成功几率(%)
        description: null, //机会描述
        //分配人
        assignMan: null,
      },
      chanceSource:[
        {
          value: '官网'
        },
        {
          value: '广告'
        },
        {
          value: '百度'
        }
      ],//机会来源
      assignMan:[
          {
            value: '张三',
          },
          {
            value: '李四',
          }
      ],//分配人
      dialog: false,
      title: null,
      type: 0
    }
  },
  methods:{
    //关闭前的回调
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
    },
    //重置表单
    resetForm(){
      console.log('调用')
      Object.assign(this.saleChange,this.$options.data.call(this).saleChange);
    },
    //添加
    submitAdd() {
      addSaleChance(this.saleChange).then(data=>{
        if(data.code===200){
          ElMessage.success('添加成功！！！');
          this.dialog = false;
          this.$emit('refresh-data');
        }
      })
    },
    //编辑（修改）
    submitUpdate(){
      updateSaleChance(this.saleChange).then(data=>{
        if(data.code===200){
          ElMessage.success('修改成功！！！');
          this.dialog = false;
          this.$emit('refresh-data');
        }else {
          ElMessage.error('修改失败！！！');
        }
      })
    },
  }
}
</script>

<style scoped>
/*营销机会添加*/
.el-select-dropdown__item {
  width: 60%;
}

.add {
  width: 550px;
  height: 580px;
  border: 0px solid black;
  margin: 40px;
  padding: 1px;
}

.name {
  width: 536px;
  height: 38px;
  border: 0px solid black;
  margin-top: 15px;
  text-align: right;
}

.describe {
  width: 536px;
  height: 75px;
  border: 0px solid black;
  margin-top: 15px;
  text-align: right;
  line-height: 4;
}

.confirm {
  width: 466px;
  height: 44px;
  border: 0px solid black;
  margin-left: 137px;
  margin-top: 473px;
}

.add div span {
  padding: 0 15px;
}
.el-select-dropdown__item{
  width: 100%;
  color: darkgray;
}
/**/
</style>